<template>
  <div class="notepad_wrapper">
    <div
      class="notepad_container notepad_container_read"
      style="padding-top: 30px"
    >
      <div class="notepad_taking_wrap">
        <div class="notepad_taking_container">
          <div class="notepad_taking_footer">
            <div class="notepad_taking_footer_toolbar">
              <span class="notepad_taking_footer_toolbar_left">
                <i
                  v-if="currentNote"
                  title="设为星标"
                  class="notepad_taking_toolbar_icon notepad_taking_star_icon notepad_taking_footer_toolbar_item xm_icons xm_icons_Star"
                  @click="toggleStarred(currentNote)"
                >
                  {{ currentNote.isStarred ? "⭐" : "☆" }}
                </i>
                <span v-if="currentNote" class="notepad_taking_toolbar_split"
                  >|</span
                >
                <span
                  v-if="currentNote"
                  class="notepad_taking_toolbar_category notepad_taking_footer_toolbar_item"
                >
                  <i
                    class="notepad_taking_toolbar_icon notepad_taking_toolbar_category_icon xm_icons_NotepadTag xm_icons"
                  ></i>
                  <span class="notepad_taking_footer_toolbar_item_text">{{
                    currentNote.category
                  }}</span>
                </span>
              </span>

              <span class="notepad_taking_footer_toolbar_right">
                <span class="notepad_taking_toolbar_on_read">
                  <span
                    class="notepad_taking_footer_toolbar_item"
                    @click="editNote"
                  >
                    <i
                      class="notepad_taking_toolbar_icon notepad_taking_toolbar_edit_icon xm_icons_NotepadEdit xm_icons"
                      >🖊</i
                    >
                    <span>编辑记事</span>
                  </span>
                  <!-- 添加删除按钮 -->
                  <span
                    class="notepad_taking_footer_toolbar_item"
                    @click="deleteNote(currentNote)"
                  >
                    <i
                      class="notepad_taking_toolbar_icon notepad_taking_toolbar_delete_icon xm_icons_NotepadDelete xm_icons"
                      >🗑</i
                    >
                    <span>删除</span>
                  </span>
                  <span class="notepad_taking_footer_toolbar_item">
                    <div tabindex="1" class="xm_dropdown">
                      <div class="xm_dropdown_toggle">
                        <!-- <span class="notepad_taking_footer_toolbar_item">
                          <i
                            class="notepad_taking_toolbar_icon xm_icons_NotepadMore xm_icons"
                            >≡</i
                          >
                          <span>更多</span>
                        </span> -->
                      </div>
                    </div>
                  </span>
                  <span></span>
                </span>
              </span>
            </div>
          </div>

          <div class="notepad_taking_main">
            <div class="notepad_taking_main_inner">
              <div id="notepad_taking_pdf">
                <h2 v-if="currentNote" class="notepad_taking_main_subject">
                  <input
                    v-if="isEditing"
                    v-model="currentNote.title"
                    type="text"
                    class="edit-title"
                  />
                  <span v-else>{{ currentNote.title }}</span>
                </h2>
                <p v-if="currentNote" class="notepad_taking_main_content">
                  <textarea
                    v-if="isEditing"
                    v-model="currentNote.content"
                    class="edit-content"
                  ></textarea>
                  <span v-else v-html="currentNote.content"></span>
                </p>
                <!-- 添加保存按钮 -->
                <button v-if="isEditing" @click="saveNote" class="save-button">
                  保存
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="notepad_sidebar">
        <div class="notepad_sidebar_wrapper">
          <div class="notepad_sidebar_container">
            <div class="notepad_sidebar_topbar notepad_sidebar_padding">
              <span class="search_input search_notepad">
                <i
                  class="xm_icons xm_icons_Search24h search_input_searchIcon"
                ></i>
                <input
                  type="text"
                  autocomplete="off"
                  placeholder="搜索"
                  class="search_input_text"
                />
              </span>
              <button class="newnote_button xm_btn_Blue" @click="addNote">
                新建
              </button>
              <div class="notepad_sidebar_tabs_splitline"></div>
            </div>

            <div class="notepad_sidebar_tabs">
              <div class="notepad_sidebar_tabs_nav">
                <div class="xm-tabs">
                  <table
                    cellspacing="0"
                    cellpadding="0"
                    border="0"
                    class="composetab"
                  >
                    <tbody>
                      <tr class="composetab_tr">
                        <td>
                          <div class="composetab_sel">
                            <div class="composetab_item">全部</div>
                          </div>
                        </td>
                        <td>
                          <div class="composetab_unsel">
                            <div class="composetab_item">星标</div>
                          </div>
                        </td>
                        <td>
                          <div class="composetab_unsel">
                            <div class="composetab_item">分类</div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                  <div class="xm-tabs-panes-content">
                    <div role="tabpanel" id="pane-all" class="el-tab-pane">
                      <div class="notepad_sidebar_tabs_nav_list">
                        <div class="notepad_list__wrapper">
                          <div class="notepad_list_container">
                            <div class="notepad_list_group_notepad">
                              <div
                                v-for="(note, index) in notes"
                                :key="index"
                                class="notepad_item_wrapper notepad_item"
                                :class="{
                                  notepad_item_selected: currentNote === note,
                                }"
                                @click="selectNote(note)"
                              >
                                <div
                                  class="notepad_item_container notepad_sidebar_padding"
                                >
                                  <div class="notepad_item_box">
                                    <div class="notepad_item_content">
                                      <div class="notepad_item_title">
                                        <span class="notepad_item_title_text">{{
                                          note.title
                                        }}</span>
                                      </div>
                                      <div class="notepad_item_tips">
                                        <span class="notepad_item_tips_date">{{
                                          note.date
                                        }}</span>
                                        <span
                                          class="notepad_item_tips_category"
                                          >{{ note.category }}</span
                                        >
                                      </div>
                                    </div>
                                    <div class="notepad_item_opt">
                                      <div tabindex="1" class="xm_dropdown">
                                        <div class="xm_dropdown_toggle">
                                          <div
                                            class="notepad_item_opt_ico"
                                            style="opacity: 1"
                                          >
                                            ...
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="notepad_list_group_footer"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      role="tabpanel"
                      id="pane-star"
                      class="el-tab-pane"
                      style="display: none"
                    >
                      <div class="notepad_sidebar_tabs_nav_list">
                        <div class="notepad_list__wrapper">
                          <div class="notepad_list_container">
                            <div class="notepad_list_group_notepad">
                              <div
                                v-for="(note, index) in starredNotes"
                                :key="index"
                                class="notepad_item_wrapper notepad_item"
                                :class="{
                                  notepad_item_selected: currentNote === note,
                                }"
                                @click="selectNote(note)"
                              >
                                <div
                                  class="notepad_item_container notepad_sidebar_padding"
                                >
                                  <div class="notepad_item_box">
                                    <div class="notepad_item_content">
                                      <div class="notepad_item_title">
                                        <span class="notepad_item_title_text">{{
                                          note.title
                                        }}</span>
                                      </div>
                                      <div class="notepad_item_tips">
                                        <span class="notepad_item_tips_date">{{
                                          note.date
                                        }}</span>
                                        <span
                                          class="notepad_item_tips_category"
                                          >{{ note.category }}</span
                                        >
                                      </div>
                                    </div>
                                    <div class="notepad_item_opt">
                                      <div tabindex="1" class="xm_dropdown">
                                        <div class="xm_dropdown_toggle">
                                          <div
                                            class="notepad_item_opt_ico"
                                            style="opacity: 1"
                                          >
                                            ...
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="notepad_list_group_footer"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      role="tabpanel"
                      id="pane-category"
                      class="el-tab-pane"
                      style="display: none"
                    ></div>
                  </div>
                  <div></div>
                </div>
              </div>

              <div
                class="notepad_sidebar_tabs_cate_notes"
                style="display: none"
              ></div>

              <div
                class="notepad_sidebar_tabs_inside_search"
                style="display: none"
              ></div>

              <span class="notepad_sidebar_tabs_sort"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="xm_mailPushTip_contatinerBox" style="display: none"></div>
</template>

<script lang="ts">
import axios from "axios";
import { defineComponent, ref, computed, onMounted } from "vue";

export default defineComponent({
  setup() {
    const storedUserInfo = localStorage.getItem("userInfo");
    const userId = ref(null);
    if (storedUserInfo) {
      const userInfo = JSON.parse(storedUserInfo);
      userId.value = userInfo.id;
    }

    if (!userId.value) {
      console.error("未获取到有效的 user_id，请检查本地存储。");
    }
    // const notes = ref(
    //   storedNotes
    //     ? JSON.parse(storedNotes)
    //     : [
    //         {
    //           id: 1,
    //           title: "朋友，看这里",
    //           content: `
    //       <p class="MsoNormal">从现在开始，你可以在记事本中写记事了。</p>
    //       <blockquote style="margin: 0px 0px 10px; padding: 14px 16px; color: rgb(149, 149, 149); background-color: rgb(245, 246, 250);">记忆力并不是智慧，但没有记忆力还成什么智慧呢？——哈柏</blockquote>
    //       <p>
    //         <img src="https://rescdn.qqmail.com/qqmail/images/jishibenshuoming1.jpg" class="app-upload-image " alt="">
    //       </p>
    //       <p class="p1"> 记事本，记录点滴生活。</p>
    //     `,
    //           date: "56分钟前",
    //           category: "未分类",
    //           isStarred: false,
    //         },
    //       ]
    // );

    const notes = ref<any[]>([]);
    const currentNote = ref(notes.value[0]);
    const isEditing = ref(false);

    // const showCommentsForIndex = ref(-1); // 用于控制显示哪个笑话的评论

    const starredNotes = computed(() => {
      return notes.value.filter((note: { isStarred: any }) => note.isStarred);
    });

    const addNote = async () => {
      const newNote = {
        user_id: userId.value,
        title: "新记事",
        content: "",
      };

      try {
        const response = await axios.post(
          "http://localhost:3000/api/create-note",
          newNote
        );
        if (response.data.success) {
          // 重新获取用户的记事列表
          await fetchNotes();
          // 选择新创建的记事
          currentNote.value = notes.value[notes.value.length - 1];
        }
      } catch (error) {
        console.error("创建记事出错:", error);
      }
    };

    const selectNote = (note: any) => {
      currentNote.value = note;
      isEditing.value = false;
    };

    const editNote = () => {
      isEditing.value = true;
    };

    const toggleStarred = (note: { isStarred: boolean }) => {
      note.isStarred = !note.isStarred;
      // 可以在这里添加保存星标状态到数据库的逻辑
    };

    const saveNote = async () => {
      const { id, title, content } = currentNote.value;
      try {
        const response = await axios.post(
          "http://localhost:3000/api/update-note",
          {
            note_id: id,
            title,
            content,
          }
        );
        if (response.data.success) {
          isEditing.value = false;
          // 重新获取用户的记事列表
          await fetchNotes();
        }
      } catch (error) {
        console.error("保存记事出错:", error);
      }
    };

    const deleteNote = async (noteToDelete: any) => {
      const { id } = noteToDelete;
      try {
        const response = await axios.post(
          "http://localhost:3000/api/delete-note",
          { note_id: id }
        );
        if (response.data.success) {
          // 重新获取用户的记事列表
          await fetchNotes();
          currentNote.value = notes.value.length > 0 ? notes.value[0] : null;
        }
      } catch (error) {
        console.error("删除记事出错:", error);
      }
    };

    const fetchNotes = async () => {
      if (userId.value) {
        try {
          const response = await axios.get(
            `http://localhost:3000/api/get-notes/${userId.value}`
          );
          if (response.data.success) {
            notes.value = response.data.notes;
            currentNote.value = notes.value[0] || null;
          }
        } catch (error) {
          console.error("获取记事列表出错:", error);
        }
      }
    };

    onMounted(() => {
      fetchNotes();
    });

    return {
      notes,
      currentNote,
      isEditing,
      starredNotes,
      addNote,
      selectNote,
      editNote,
      toggleStarred,
      saveNote,
      deleteNote,
    };
  },
});
</script>

<style scoped>
.notepad_wrapper {
  background: #f5f6f7;
  box-sizing: border-box;
  height: 100%;
  min-width: 960px;
  overflow: hidden;
}

.notepad_container_read {
  padding-left: 30px;
}
.notepad_container {
  display: flex;
  height: 100%;
  justify-content: center;
}

.notepad_taking_wrap {
  border-radius: 2px;
  flex: 1;
  max-width: calc(100% - 331px);
}

.notepad_taking_container {
  background: #fff;
  border: 1px solid #e6e8eb;
  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: calc(100% - 30px);
  margin: 0 auto;
}

.notepad_taking_footer {
  align-items: center;
  border-bottom: 1px solid #e6e8eb;
  box-shadow: 0 -1px 0 0 #e6e8eb;
  display: flex;
  height: 55px;
  width: 100%;
}

.notepad_taking_footer_toolbar {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.notepad_taking_footer_toolbar_left {
  align-items: center;
  display: flex;
  margin-left: 40px;
}

.xm_icons.notepad_taking_toolbar_icon {
  display: inline-block;
  font-size: 16px;
  margin-right: 7px;
}

.notepad_taking_footer_toolbar_item {
  align-items: center;
  cursor: pointer;
  display: flex;
  user-select: none;
}

.notepad_taking_star_icon {
  margin-right: 3px !important;
}
.xm_icons {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #959da6;
  font-family: icons;
  font-size: 24px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
}

.notepad_taking_toolbar_split {
  color: #e6e8eb;
  cursor: default;
  margin: 0 12px;
  user-select: none;
}

.notepad_taking_footer_toolbar_item_text {
  word-wrap: normal;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.notepad_taking_footer_toolbar_right {
  display: inline-block;
  margin-right: 40px;
}

.notepad_taking_toolbar_on_read {
  display: flex;
}

.notepad_taking_toolbar_on_read_send {
  margin-left: 30px;
  margin-right: 30px;
}

.notepad_taking_toolbar_addCalendar {
  margin: 0 30px;
}

.xm_dropdown {
  display: inline-block;
  position: relative;
}

.xm_dropdown_toggle {
  height: 100%;
}
/* 记事内容部分 */
.notepad_taking_main {
  flex: 1;
  overflow: auto;
  padding-bottom: 60px;
}

.notepad_taking_main_inner {
  margin: 60px auto 0;
  width: 80%;
}

.notepad_taking_main_subject {
  color: #2e3033;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 20px;
}

.notepad_taking_main_content {
  color: #2e3033;
  font-size: 13px;
  line-height: 27px;
  padding-right: 30px;
  position: relative;
  text-align: justify;
  word-break: break-all;
}

.notepad_taking_main_content img {
  max-width: 100%;
}

img {
  border: 0;
}

/* 以下为侧边栏 */
.notepad_sidebar {
  width: 330px;
}

.notepad_sidebar_wrapper {
  padding: 5px 0 1px;
}

.notepad_sidebar_padding {
  padding-left: 32px;
  padding-right: 20px;
}

.search_input {
  background-color: #f5f6f7;
  border: 1px solid transparent;
  border-radius: 2px;
  box-sizing: border-box;
  height: 30px;
  overflow: hidden;
  padding: 0 15px 0 32px;
  position: relative;
  transition: all 0.2s linear;
  width: 300px;
}

.search_input.search_notepad {
  background: #e8eaec;
  display: inline-block;
  flex: 1;
  max-width: 190px;
  vertical-align: middle;
}

.search_notepad {
  transition: all 0.2s linear;
}

.search_notepad .search_input_text {
  vertical-align: top;
}

.search_input_text {
  background-color: transparent;
  border: 0;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 20px;
  margin: 0;
  outline: none;
  padding: 4px 0;
  width: 100%;
}

.newnote_button {
  background-image: var(
    --theme_primary,
    linear-gradient(90deg, #328ffa 0, #328ffa 100%)
  );
  border: none;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  height: 30px;
  letter-spacing: 0;
  line-height: 20px;
  margin-left: 7px;
  width: 81px;
}
.xm_btn_Blue {
  background: var(--theme_primary, #328ffa);
  border: none;
  color: #fff;
  line-height: 26px;
}

.notepad_sidebar_tabs_splitline {
  box-shadow: 0 2px 0 0 #edf0f2;
  color: #2e3033;
  display: none;
  height: 2px;
  left: 0;
  position: absolute;
  top: 88px;
  width: calc(100% - 52px);
}

.notepad_sidebar_tabs {
  display: flex;
  margin-top: 22px;
  position: relative;
}

.notepad_sidebar_tabs_nav {
  flex: 1;
  width: 100%;
}

.xm-tabs {
  position: relative;
}

.notepad_sidebar_tabs_nav .composetab {
  padding-left: 30px;
  width: 258px;
}

table {
  font-size: inherit;
}

td,
th {
  padding: 0;
}

.notepad_sidebar_tabs_nav .composetab_item {
  cursor: pointer;
  font-size: 12px;
  line-height: 18px;
  padding-bottom: 15px;
  padding-top: 0;
  user-select: none;
  vertical-align: sub;
}
.composetab_sel .composetab_item {
  font-weight: 700;
}

.composetab_item {
  margin-right: 30px;
  text-align: center;
  width: 56px;
}

.composetab_unsel .composetab_item {
  color: #5c6166;
}

.xm-tabs-panes-content {
  border-top: 1px solid #e6e8eb;
}

.notepad_sidebar_tabs_cate_notes_list,
.notepad_sidebar_tabs_nav_list {
  height: calc(100vh - 195px);
  overflow-y: auto;
}

.category_item__wrapper:hover,
.notepad_item_selected,
.notepad_item_wrapper:hover {
  background: #e8eaec;
  cursor: pointer;
}

.category_item__wrapper,
.notepad_item_wrapper {
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.notepad_sidebar_padding {
  padding-left: 32px;
  padding-right: 20px;
}

.category_item__wrapper:hover .category_item_box,
.notepad_item_selected .notepad_item_box,
.notepad_item_wrapper:hover .notepad_item_box {
  box-shadow: 0 0 0 0 #edf0f2;
}

.category_item_box,
.notepad_item_box {
  box-shadow: 0 2px 0 0 #edeeef;
  display: flex;
  padding-bottom: 20px;
  padding-top: 20px;
}

.category_item_content,
.notepad_item_content {
  width: calc(100% - 40px);
}

.notepad_item_title,
.notepad_taking_footer_toolbar_left .xm_icons_FullStar {
  color: #ffd500;
}
.notepad_item_title {
  margin-bottom: 5px;
}

.notepad_item_title_text {
  color: #2e3033;
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0;
  max-width: calc(100% - 25px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.notepad_item_title_star_icon {
  font-size: 16px;
  vertical-align: text-bottom;
}

.notepad_item_tips {
  display: flex;
  font-size: 12px;
  line-height: 18px;
}

.notepad_item_tips_date {
  color: #959da6;
}

.notepad_item_tips_category {
  word-wrap: normal;
  color: #45bd5e;
  color: #959da6;
  margin-left: 15px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.category_item_opt,
.notepad_item_opt {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 40px;
}

.xm_dropdown {
  display: inline-block;
  position: relative;
}

.xm_dropdown_toggle {
  height: 100%;
}

.notepad_item_wrapper .notepad_item_opt_ico {
  font-weight: 500;
  transition: all 0.4s;
}

/* 可以添加一些样式来优化显示 */
.edit-title {
  width: 100%;
  font-size: 1.5em;
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.edit-title:hover {
  border-color: #999;
}

.edit-title:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  outline: none;
}

.edit-content {
  width: 100%;
  min-height: 200px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.edit-content:hover {
  border-color: #999;
}

.edit-content:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  outline: none;
}

.search_input_text:hover {
  border-color: #999;
}

.search_input_text:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  outline: none;
}
</style>
